<template>
	<view>
		<view class="commodity" @click="clickHandler()">
			<view class="information">
				<view class="head">
					<image class="head" :src="goods.avatar" mode=""></image>
				</view>
				<view class="goodsInfo">
					<text class="goodsName">{{goods.goods_name}}</text>
					<text class="time" v-if="showTime">{{goods.seller_name}}发布于{{goods.time}}前</text>
				</view>
				<view class="price">${{goods.price}}</view>
				<view class="orderShow" v-if="showOrder">
					<view class="orderStatus" :style="{color:order_color}">{{order_status}}</view>
					<button class="order btn3" v-if="!order_show" @click.stop="confirm()">确认收货</button>
				</view>
				<view class="issueShow" v-if="showIssue">
					<view class="orderStatus" :style="{color:issue_color}">{{issue_status}}</view>
					<button class="order btn1" v-if="issue_show" @click.stop="recall()">撤回商品</button>
					<button class="order btn2" v-if="issue_show" @click.stop="updateIssue()">修改信息</button>
				</view>
			</view>
			<view class="picContainer">
				<view class="pic" v-for="(item,index) in goods.pic">
					<image :src="item" mode=""></image>
				</view>
			</view>
			<view class="introduce">
				<text>{{goods.introduce}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'

	export default {
		goodsName: "buji-goods",

		computed: {
			order_status() {
				return this.goods.order_status == 1 ? '已收货' : '未收货'
			},
			order_color() {
				return this.goods.order_status == 1? '#00B26A' : '#FBC02D'
			},
			order_show() {
				return this.goods.order_status == 1 ? true : false
			},
			issue_status() {
				return this.goods.buyer_id !== 0 ? '已售出' : '未售出'
			},
			issue_color() {
				return this.goods.buyer_id !== 0 ? '#00B26A' : '#FBC02D'
			},
			issue_show() {
				return this.goods.buyer_id !== 0 ? false : true
			},
		},
		data() {
			return {};
		},
		// 定义 props 属性，用来接收外界传递到当前组件的数据
		props: {
			// 商品的信息对象
			goods: {
				type: Object,
				defaul: {},
			},
			// 是否展示商品发布时间
			showTime: {
				type: Boolean,
				default: false,
			},
			// 是否展示订单收货信息
			showOrder: {
				type: Boolean,
				default: false,
			},
			// 是否展示发布商品信息
			showIssue: {
				type: Boolean,
				default: false,
			},
		},
		methods: {
			...mapMutations('buji_search', ['updateGoods']),
			
			clickHandler() {
				//向外传递click时间
				this.$emit('click')
			},
			refund(){
				this.updateGoods(this.goods)
				uni.navigateTo({
					url: '/subpkg/applyRefund/applyRefund'
				})
			},
			confirm(){
				let id=this.goods.goods_id
				this.$emit('confirmOrder',id)
			},
			recall(){
				console.log(this.goods);
				let id = this.goods.goods_id
				this.$emit('recallGood',id)
			},
			updateIssue() {
				console.log(this.goods);
				this.updateGoods(this.goods)
				uni.navigateTo({
					url: '/subpkg/updateIssue/updateIssue'
				})
			}
		}
	}
</script>

<style lang="scss">
	/* 物品内容 */
	.commodity {
		height: 400rpx;
		margin: 20rpx 20rpx;
		background-color: #efefef;
		// border: solid 5rpx;
		border-radius: 20rpx;
		flex-direction: column;
	}

	/* 物品信息介绍 */
	.information {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		height: 140rpx;
		margin-top: 10rpx;
		width: 750rpx;
	}

	/* 头像样式 */
	.head {
		width: 130rpx;
		height: 130rpx;
		border-radius: 65rpx;

	}

	/* 商品信息 */
	.goodsInfo {
		width: 400rpx;
		height: 120rpx;
		margin-left: 10rpx;
		display: flex;
		flex-direction: column;
	}

	/* 商品名称 */
	.goodsName {
		width: 360rpx;
		height: 60rpx;
		font-size: 48rpx;
		font-weight: bold;
		line-height: 48rpx;
		margin-top: 10rpx;
		// 溢出文字省略号
		// white-space: nowrap;
		// overflow-x: hidden;
		// text-overflow: ellipsis;
	}

	/* 发布时间 */
	.time {
		height: 60rpx;
		line-height: 60rpx;
		margin-top: 10rpx;
		margin-left: 10rpx;
		color: gray;
	}

	/* 价格 */
	.price {
		height: 75rpx;
		font-size: 50rpx;
		text-align: center;
		font-weight: bold;
		margin-top: 0rpx;
		color: #C00000;
	}

	.orderStatus {
		margin-top: -50rpx;
		margin-left: 200rpx;
	}

	.order {
		width: 150rpx;
		height: 40rpx;
		text-align: center;
		font-size: 24rpx;
		line-height: 40rpx;
	}

	.btn1 {
		margin-left: 400rpx;
		margin-top: -40rpx;
		color: #FBC02D;
	}

	.btn2 {
		margin-right: -150rpx;
		margin-top: -40rpx;
		color: #00B26A;
	}
	.btn3 {
		margin-right: -400rpx;
		margin-top: -40rpx;
		color: #00B26A;
	}


	// 图片
	.picContainer {
		display: flex;
		flex-wrap: wrap;
		margin: 20rpx 0;
		padding-left: 20rpx;

		.pic {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 0 10rpx;

			image {
				width: 150rpx;
				height: 150rpx;
			}
		}
	}

	/* 物品介绍 */
	.introduce {
		margin-left: 40rpx;
		font-size: 32rpx;
		line-height: 36rpx;
		height: 36rpx;
		width: 90%;
		// 溢出文字省略号
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>
